<template>
  <div class="async-view">
    <div class="item-vew">
      <div class="title">同步：</div>
      <div class="info">
        指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去
      </div>
    </div>
    <div class="item-vew">
      <div class="title">异步：</div>
      <div class="info">
        指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
      </div>
    </div>
    <div class="value">
      提示：js是自上而下的同步运行。Promess和定时器为异步运行。
    </div>
    <hr />
    <!-- 内容部分 -->
    <div class="content">
      <p>异步:</p>
      <div class="center">
        <p>第一步：{{ hint_1.label }}</p>
        <p>第二步：{{ hint_1.text }}</p>
        <p>第三步：{{ hint_1.value }}</p>
      </div>
      <van-button plain size="small" type="primary" @click="getStart()"
        >点击开始</van-button
      >
      <van-button plain size="small" type="info" @click="getReset(1)"
        >重置</van-button
      >
      <hr />
      <p>变异步为同步:</p>
      <div class="center">
        <p>第一步：{{ hint_2.label }}</p>
        <p>第二步：{{ hint_2.text }}</p>
        <p>第三步：{{ hint_2.value }}</p>
      </div>
      <van-button plain size="small" type="primary" @click="getStartToo()"
        >点击开始</van-button
      >
      <van-button plain size="small" type="info" @click="getReset(2)"
        >重置</van-button
      >
    </div>
    <br>
    <div class="item-vew">
      <div class="title">提示：</div>
      <div class="info">
        在await作用的异步方法会被变成同步的，不在await作用下的还是按照 js 的运行规则。
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hint_1: {
        label: "",
        text: "",
        value: "",
      },
      hint_2: {
        label: "",
        text: "",
        value: "",
      },
    };
  },
  methods: {
    getStart() {
      //赋值 label
      this.dataService().then((res) => {
        this.hint_1.label = res;
      });
      //赋值 text
      setTimeout(() => {
        this.hint_1.text = "中间赋值...";
      }, 1000);
      //赋值 value
      this.hint_1.value = "最后执行..";
    },

    async getStartToo() {
      //赋值 label
      await this.dataService().then((res) => {
        this.hint_2.label = res;
      });
      //赋值 text
      let timer2 = setTimeout(() => {
        this.hint_2.text = "中间赋值...";
        clearTimeout(timer2);
      }, 1000);
      //赋值 value
      this.hint_2.value = "最后执行..";
    },

    getReset(val) {
      if (val === 1) {
        this.hint_1 = {
          label: "",
          text: "",
          value: "",
        };
      } else if (val === 2) {
        this.hint_2 = {
          label: "",
          text: "",
          value: "",
        };
      }
    },

    dataService() {
      return new Promise((reslove, reject) => {
        try {
          let timer = setTimeout(() => {
            reslove("最先执行...");
            clearTimeout(timer);
          }, 2000);
        } catch (err) {
          reject("执行错误");
        }
      });
    },

    //promess
  },
};
</script>
<style lang="scss" scoped>
.async-view {
  height: 100%;
  padding: 10px;
  .item-vew {
    margin-bottom: 10px;
    .title {
      font-size: 15px;
    }
    .info {
      font-size: 12px;
      text-indent: 20px;
      color: #666;
      line-height: 18px;
    }
  }
  .value {
    font-size: 12px;
    color: #409eff;
  }
  .content {
    font-size: 14px;
    .center {
      height: 100px;
    }
    .van-button {
      margin-right: 10px;
    }
  }
}
</style>